import { Modal,Calendar,DatePicker, Space,TreeSelect } from 'antd';
import React, { useState } from 'react';
import '../view/css/bg_rc.css'
const { TreeNode } = TreeSelect;

let Bg_rc = function(){
    function onPanelChange(value, mode) {
        console.log(value.format('YYYY-MM-DD'), mode);
        
    }
    const [visible, setVisible] = useState(false);
    //const { RangePicker } = DatePicker;
    var state = {
        value: undefined,
    };
    var onChange = value => {
        console.log(value);
        //this.setState({ value });
      };
    return(
        <div className ='clearfix hz'>
            <div className ='clearfix'>
                <span>今天</span>
                <p>
                    <span>日</span>
                    <span>周</span>
                    <span>月</span>
                </p>
                <p>
                    «<span>2021年 四月</span>»
                </p>
                <span><a type="primary" onClick={() => setVisible(true)}>创建日程</a></span>
            </div>
            <div className='rili'>
                <Calendar onPanelChange={onPanelChange} />
            </div>
            <div>
                <Modal
                    
                    centered
                    visible={visible}
                    onOk={() => setVisible(false)}
                    onCancel={() => setVisible(false)}
                    width={100+'%'}
                    height={100+'%'}
                >
                    <div className="cj">
                        <div>
                            <h2>创建日程</h2>
                            <div className='zt'>
                                <p><span>*</span>主题</p>
                                <input placeholder='请输入内容' /><br></br>
                                <span></span><span></span><span></span><span></span>
                                <span></span><span></span><span></span>
                            </div>
                            <div className='ksjs clearfix'>
                                <div className='ks'>
                                    <p><span>*</span>开始时间</p>
                                    <Space direction="vertical" size={12}>
                                        <DatePicker renderExtraFooter={() => 'extra footer'} showTime placeholder='请选择时间' />
                                    </Space>
                                </div>
                                <div className='js'>
                                    <p><span>*</span>结束时间</p>
                                    <Space direction="vertical" size={12}>
                                        <DatePicker renderExtraFooter={() => 'extra footer'} showTime placeholder='请选择时间'/>
                                    </Space>
                                </div>
                                <div className='cy'>
                                    <p><span>*</span>参与人</p>
                                    <TreeSelect
                                        showSearch
                                        style={{ width: '45%' ,margin:0}}
                                        value={state.value}
                                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                        placeholder="Please select"
                                        allowClear
                                        multiple
                                        treeDefaultExpandAll
                                        onChange={onChange}
                                    >
                                        <TreeNode value="parent 1" title="parent 1">
                                            <TreeNode value="parent 1-0" title="parent 1-0">
                                                <TreeNode value="leaf1" title="my leaf" />
                                                <TreeNode value="leaf2" title="your leaf" />
                                            </TreeNode>
                                        <TreeNode value="parent 1-1" title="parent 1-1">
                                            <TreeNode value="sss" title={<b style={{ color: '#08c' }}>sss</b>} />
                                        </TreeNode>
                                        </TreeNode>
                                    </TreeSelect>
                                </div>
                                <div className='bz'>
                                    <p><span>*</span>备注</p>
                                    <textarea></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    )
}
export default Bg_rc